<template>
  <view class="container">
    <scroll-view
      class="myFeedback"
      scroll-y
      refresher-enabled
      lower-threshold="50"
      @scrolltolower="scrollData"
      :refresher-triggered="isTriggered"
      @refresherrefresh="refreshData"
    >
      <view
        class="feedback-card"
        v-for="(item, index) in feedbackData"
        :key="index"
      >
        <view class="feedback-card-content">
          <view class="feedback-card-content-text"
            >反馈内容： <br />{{ item.content }}</view
          ><view class="feedback-card-time">
            <view class="feedback-card-time-left-time">{{
              formatDateTime(item.create_time)
            }}</view>
          </view>
          <view class="feedback-card-content-images">
            <view
              class="feedback-card-content-images-item"
              v-for="(img, ind) in item.images"
              :key="ind"
            >
              <image
                :src="img"
                mode="scaleToFill"
                @tap="previewImage(index, ind)"
              />
            </view>
          </view>
        </view>
        <view class="feedback-card-answer">
          <view class="feedback-card-answer-text">{{
            item.answer === null ? "暂无回复" : "回复内容：" + item.answer
          }}</view>
        </view>
      </view>
      <uni-load-more :status="loadStatus" />
    </scroll-view>
    <uni-fab
      :pop-menu="false"
      horizontal="right"
      :pattern="fabpattern"
      @fab-click="fabClick"
    ></uni-fab>
  </view>
</template>

<script lang="ts" setup>
import { onLoad } from "@dcloudio/uni-app";
import { getUserStorage } from "@/utils/storage";
import { getFeedbackAPI } from "@/services/index";
import { ref } from "vue";
import { formatDateTime } from "@/utils/time";
let fabpattern = {
  buttonColor: "#ffa500",
  iconColor: "#fff",
};
let isTriggered = ref(false);
let loadStatus = ref<UniHelper.UniLoadMoreStatus>("more");
let userId = ref<string>("");
onLoad(() => {
  let r = getUserStorage().profile;
  userId.value = r.user_id;
  getFeedback(userId.value);
});
let feedbackData = ref<any>([]);
let pageParams = {
  page: 1,
  size: 5,
};
let getFeedback = async (userId: string) => {
  let params = {
    userId: userId,
    page: 1,
    size: pageParams.size,
  };

  let result: any = await getFeedbackAPI(params);

  if (result.code === 200) {
    feedbackData.value = result.data;
    if (result.pages < pageParams.size) {
      loadStatus.value = "noMore";
    } else {
      loadStatus.value = "more";
      pageParams.page++;
    }
  } else {
    uni.showToast({
      title: "获取数据失败",
      icon: "none",
    });
  }
};
const previewImage = (index: number, ind: number) => {
  uni.previewImage({
    current: ind,
    urls: feedbackData.value[index].images,
  });
};
const refreshData = async () => {
  isTriggered.value = true;
  await getFeedback(userId.value);
  isTriggered.value = false;
};
const scrollData = async () => {
  if (loadStatus.value === "noMore") {
    return uni.showToast({
      title: "没有更多数据了",
      icon: "none",
    });
  }
  loadStatus.value = "loading";
  let params = {
    userId: userId.value,
    page: pageParams.page,
    size: pageParams.size,
  };
  let result: any = await getFeedbackAPI(params);
  if (result.code === 200) {
    feedbackData.value.push(...result.data);
    console.log(feedbackData.value);
  } else {
    uni.showToast({
      title: "获取数据失败",
      icon: "none",
    });
  }
};
const fabClick = () => {
  uni.showModal({
    title: "提示",
    content: "是否对本小程序进行反馈？",
    success: (result) => {
      if (result.confirm) {
        uni.navigateTo({
          url: "/pagesMember/feedback/feedback",
        });
      }
    },
    fail: () => {},
    complete: () => {},
  });
};
</script>

<style scoped lang="scss">
.container {
  position: relative;
  .myFeedback {
    height: calc(100vh - var(--window-top));
    // height: 1800rpx;
    width: 100%;
    padding: 20rpx;

    .feedback-card {
      width: calc(100% - 40rpx);
      box-sizing: border-box;
      padding: 20rpx;
      background-color: #fff;
      border-radius: 15rpx;
      box-shadow: 0 0 20rpx rgba(0, 0, 0, 0.1);
      font-weight: bold;
      margin-bottom: 15rpx;
      line-height: 1.5;
      .feedback-card-content {
        .feedback-card-time {
          font-size: 24rpx;
          color: #999;
          margin-top: 10rpx;
          text-align: right;
        }
        .feedback-card-content-images {
          display: flex;
          justify-content: space-between;
          width: 100%;
          padding: 10rpx 0;
          border-bottom: 1rpx solid #eee;
          .feedback-card-content-images-item {
            min-width: 33%;
            max-width: 33%;
            height: 200rpx;
            image {
              width: 100%;
              height: 100%;
              border-radius: 15rpx;
            }
          }
        }
      }
    }
  }
}
</style>
